<template>
	<view>

		<view class="fenlei">
			<!-- 			<view class="city" @click="goPage('/pages/index/city')">
				{{city_name}}
				<image style="width: 30rpx;height: 30rpx;vertical-align: middle;display: inline-block;"
					mode="aspectFill"
					src='https://jiechendy.sdshengyue.cn/uploads/2d/4cd180334ceb72981604adab4e979a.png'></image>
			</view> -->
			<view class="father" v-for="(item,index) in categoryData">
				<view class="son" :class="{son_active: btn_status == index}" @click="change(index,item.category_id)">
					{{item.name}}
				</view>
				<view :class="{xian_active: btn_status == index}">
					
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 120rpx;">
		</view>

		<view v-for="(item,index) in listInfo" style='width: 95%; margin-left: 2.5%;background-color: #fff;border-radius: 20rpx;margin-bottom: 20rpx;'>
			<image @click="go(item.category_id)" :src="item.images.file_path" style="width: 100%;height: 380rpx;border-radius: 20rpx 20rpx 0 0;"
				></image>
				<!-- mode="widthFix"></image> -->
			<view class="product_name">{{item.name}}</view>
			<cate-card v-if="btn_status == 0" :param="item.shuju.data" />
			<cate-card v-else :param="item.shuju.data" />
		</view>

		<!-- <tabBar></tabBar> -->
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue'
	import CateCard from '@/components/cate-card.vue'
	import share from '@/common/share.js'

	export default {
		components: {
			navBar,
			CateCard,
		},
		 mixins: [share],
		data() {
			return {
				categoryData: {},
				btn_status: 0,
				category_id: '',
				listInfo: [],
				city_name: '',
				btn_status1: -1,
				new_price: 0,
			};
		},

		onShow() {
			var that = this
			// that.getTabBarLinks();
			uni.getLocation({
				type: 'gcj02',
				success(res) {
					console.log(`经度${res.longitude}纬度${res.latitude}`);
					that.city_name = uni.getStorageSync('city_name');
					if (that.city_name == '') {
						that.city_name = res.city
					} else {
						that.city_name = uni.getStorageSync('city_name');
					}


				},
				fail(res) {
					console.log("getLocation调用失败", res);
				},
			});

		},
		onLoad() {
			this.getData()
				

		},

		methods: {
			change(val, key) {
				this.btn_status = val
				this.category_id = key
				this.getList()
			},
			changeClass(index, product_id, price, sku_id) {
				this.btn_status1 = index
				this.new_price = price
			},
			getData() {
				let _this = this;
				_this.isloadding = true;
				_this._get('product.category/index', {}, function(res) {
					_this.categoryData = res.data.list;
					_this.category_id = _this.categoryData[0].category_id
					_this.getList()
				});
			},
			getList() {
				let self = this;
				self._get('product.product/wxnewlists', {
					category_id: self.category_id
				}, function(res) {
					self.listInfo = res.data.list.lpd
				});
			},
			go(val) {
				uni.navigateTo({
					url: '/pages/index/son?id=' + val
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			}

		}
	};
</script>

<style lang="scss">
	.new_price {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		border: 1px solid #2263B3;
		margin-left: 5%;
		border-radius: 50rpx;
		position: relative;
	}
.xian_active{
	width: 45rpx;
	height: 4rpx;
	background-color: #2263B3;
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	bottom: 0;
}
	.new_price_btn {
		width: 180rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		background-color: #2263B3;
		border-radius: 50rpx;
		text-align: center;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 30rpx;
		letter-spacing: 5rpx;
	}

	.fenlei {
		position: fixed;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		z-index: 44;
		color: #999;
		display: flex;

		.father {
			width: 50%;
			height: 100rpx;
position: relative;
			.son {
				width: 150rpx;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				margin: 0 auto;
				font-weight: bold;
			}
		}

	}

	.son_active {
		color: #2263B3;
		// border-bottom: 3px solid #2263B3;
	}

	.list {
		width: 90%;
		margin-left: 5%;
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.product_name {
		width: calc( 100% - 40rpx);
		padding: 0 20rpx;
		text-align: center;
		margin: 20rpx 0;
		font-size: 32rpx;
		font-weight: bold;
	}

	.city {

		width: 160rpx;
		background-color: #fff;
		padding-left: 20rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.goods_box {
		width: calc(100% - 20rpx);
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx;
	}

	.goods_list {
		font-size: 26rpx;
		width: 30%;
		text-align: center;
		height: 110rpx;
		line-height: 110rpx;
		margin-left: 10rpx;
		border-radius: 10rpx;
		border: 4rpx solid #cccccc;
		margin-bottom: 20rpx;
	}

	.goods_list_active {
		color: #2263B3;
		background-color: #D2E6FF;
		border: 4rpx solid #ABC8EC;
	}
</style>